<template>
  <el-card>
    <el-row :gutter="24">
      <el-col :span="4">
        <el-tree class="mt10" default-expand-all :current-node-key="currentNodeKey" :data="treeListData"
                 node-key="depttId"
                 :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false"/>
      </el-col>

      <el-col :span="20" :offset="0">
        <el-row>
          <el-button size="small" type="success" @click="btnAdd" v-auth="'system-dept-add'">
            <el-icon>
              <ele-FolderAdd/>
            </el-icon>
            添加
          </el-button>
          <el-button size="small" type="primary" :disabled="select.sign" @click="selectUpdateBtn" v-auth="'system-dept-update'">
            <el-icon>
              <ele-EditPen/>
            </el-icon>
            修改
          </el-button>
          <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
            <template #reference>
              <el-button size="small" type="danger" :disabled="select.ids.length<=0" v-auth="'system-dept-delete'">
                <el-icon>
                  <ele-Delete/>
                </el-icon>
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </el-row>
        <el-card shadow="always" class="mt10">
          <el-table :data="childrenDept" v-loading="loading" style="width: 100%"
                    @selection-change="handleSelectionChange" row-key="deptId">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="deptName" label="部门名称" width="180" align="center"/>
            <el-table-column prop="orderNum" label="排序" align="center"/>
            <el-table-column prop="createTime" label="创建时间" align="center"/>
            <el-table-column label="操作" align="center" v-auths="['system-dept-add', 'system-dept-update', 'system-dept-delete']">
              <template #default="scope">
                <el-link title="修改" type="primary" @click="signUpdateBtn(scope.row)" v-auth="'system-dept-update'">
                  <el-icon>
                    <ele-EditPen/>
                  </el-icon>
                </el-link>
                <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
                  <template #reference>
                    <el-link type="danger" class="ml10" title="删除" v-auth="'system-dept-delete'">
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-link>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>
    </el-row>
    <edit-form :dept-tree-list="tempTreeListData" ref="editRef" @ok="ok"></edit-form>
  </el-card>

</template>

<script setup>
import {treeList, deptListByParentId, delByIds} from '/@/api/system/dept'
import EditForm from './EditForm.vue'
import {ElMessage} from "element-plus";

const treeListData = ref([])
const tempTreeListData = ref([])
const loading = ref(true)
const editRef = ref()
let currentNode = reactive({})
let currentNodeKey = ref(null)
const handleNodeClick = (node) => {
  currentNode = node
  let {deptId} = node
  currentNodeKey.value = deptId
  loadChildrenDept(currentNodeKey.value)
}
const childrenDept = ref([])
const loadChildrenDept = (parentId) => {
  loading.value = true
  deptListByParentId(parentId).then(res => {
    childrenDept.value = res.data
    loading.value = false
  })
}


const initPageData = () => {
  new Promise((resolve, reject) => {
    treeList().then(res => {
      const {data} = res
      resolve(data)
    })
  }).then(val => {
    treeListData.value = val
    tempTreeListData.value = JSON.parse(JSON.stringify(val))
    initShowTree(treeListData.value)
    if (currentNodeKey.value == null) {
      currentNode = val[0]
      currentNodeKey.value = val[0].deptId
    }
    loadChildrenDept(currentNodeKey.value)
  }, err => {
    loading.value = false
  })
}
const select = reactive({
  sign: true,
  ids: []
})
const handleSelectionChange = (node) => {
  select.ids = node
  if (select.ids.length == 1) {
    select.sign = false
  } else {
    select.sign = true
  }
}
const btnAdd = () => {
  editRef.value.open(currentNode)
}
const signUpdateBtn = (node) => {
  editRef.value.update(node)
}
const initShowTree = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if ( arr[i].children && arr[i].children.length > 0) {
      initShowTree(arr[i].children)
    } else {
      if(arr[i].parentId===0) continue
      arr.splice(i, 1)
      i--;
    }
  }
}

const selectUpdateBtn = () => {
  editRef.value.update(select.ids[0])
}
const selectDelete = () => {
  let arr = []
  select.ids.forEach(item => {
    arr.push(item.deptId)
  })
  delByIds(arr).then(res => {
    ElMessage.success(res.msg)
    initPageData()
  })
}
const deleteRows = (node) => {
  let {deptId} = node
  delByIds(deptId).then(res => {
    ElMessage.success(res.msg)
    initPageData()
  })
}


onBeforeMount(() => {
  initPageData()
})
const defaultProps = {
  children: 'children',
  label: 'deptName',
}
const ok = () => {
  initPageData()
}
</script>

<style scoped>
</style>
